<!DOCTYPE html>
<html lang="zh">

	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>event dispatching</title>
	</head>

	<body>
		<input id="normal-text" type="text" value="I'm normal text">
		<div id="host">
			<!-- “dustributed text”为分布节点，来自原有 DOM 结构，没必要重定向。 -->
			<input id="distributed-text" type="text" value="I'm distributed text">
		</div>
		<template>
			<div>
				<input id="shadow-text" type="text" value="I'm shadow text">
			</div>
			<div>
				<content></content>
			</div>
		</template>
		<script>
			var host = document.querySelector('#host');
			var root = host.createShadowRoot();
			var template = document.querySelector('template');
			root.appendChild(document.importNode(template.content, true));
			document.addEventListener('click', function(e) {
				console.log(e.target.id + ' click!');
			});
			document.addEventListener('select', function(e) {
				console.log(e.target.id + ' select!');
			});
		</script>
	</body>

</html>